<template>
  <div class="paintedEggshelContent">
    <el-tooltip class="box-item" effect="light" content="点我试试" placement="top">
      <!-- 小彩蛋 -->
      <div class="iconWelcome" v-show="blbl" @click="welcome">
        <SvgIcon width="130px" height="130px" name="welcome" color="#fff"></SvgIcon>
      </div>
    </el-tooltip>
    <div class="iconPeople" v-show="afterBlbl">
      <SvgIcon width="90px" height="90px" name="people" color="#fff"></SvgIcon>
    </div>
    <div class="iconBoom" v-show="lastBlbl">
      <SvgIcon width="230px" height="230px" name="boom" color="#fff"></SvgIcon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const blbl = ref(true)
const afterBlbl = ref(false)
const lastBlbl = ref(false)

const welcome = () => {
  const blblTimer = setInterval(() => {
    blbl.value = false
    setTimeout(() => {
      blbl.value = true
    }, 300)
  }, 500)
  setTimeout(() => {
    clearInterval(blblTimer)
    afterBlbl.value = true
    setTimeout(() => {
      afterBlbl.value = false
      lastBlbl.value = true
      setTimeout(() => {
        lastBlbl.value = false
      }, 500)
    }, 900)
  }, 1300)
}

onMounted(() => {
  // welcome()    
})

</script>

<style lang="scss" scoped>
.paintedEggshelContent {
  .iconWelcome {
    cursor: pointer;
    position: fixed;
    right: 30px;
    bottom: 30px;
  }

  @keyframes ball {
    0% {
      bottom: 120px;
      right: 150px;
    }

    25% {
      bottom: 190px;
      right: 250px;
    }

    50% {
      bottom: 250px;
      right: 350px;
    }

    75% {
      bottom: 310px;
      right: 480px;
    }

    100% {
      bottom: 380px;
      right: 590px;
    }
  }

  .iconPeople {
    position: absolute;
    right: 140px;
    bottom: 110px;
    transform: rotate(-45deg);
    animation-name: ball;
    animation-duration: 0.9s;
  }

  .iconBoom {
    position: absolute;
    right: 550px;
    bottom: 350px;
  }
}</style>